<template>
<div>
 <van-popup v-model="show" position="left" :style="{ height: '100%'}">
   <div style="width:220px;padding-top:40px;" >
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh()">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad()"
  :immediate-check="false"
   style="min-height: 100vh"
>
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
      @click="clickproduct(item.id, item.type)"
    />
    </van-list>
    </van-pull-refresh>
    </div>
  </van-popup>
  </div>
</template>

<script>
export default {
   data() {
    return {
            dirlist: '',
            loading: true,
            finished: false,
            refreshing: false,
            total: '',
            list:[],
            page:1,
            id:"",
            show:false
        };
   },
  methods: {
     async getListDir() {
      let query = {
                id:this.id,
                page: 1,
                limit: 10,
                keyword: ''
            };
      query.page = this.page;
      let res=await this.$frontaxios.post(this.$front.getKnowledgeList2,query);
      //console.log(res);
          if(res.code==1){
              this.loading= true;
              this.dirlist=res.data.knowledgedata;
              this.total= res.data.total;
          }else{
              console.log('没有获取到专栏目录')
          }
    },
    async onLoad(){
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getListDir();
            this.list.push(...this.dirlist);
            this.page++;
            this.loading = false; //不加载了，滚动底会变为true
            if (this.list.length >= this.total) {
                this.finished = true; //数据全部加载完设为true
            }
        },
    onRefresh(){
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loadingall 设置为 true，表示处于加载状态
            this.loading = true;
            this.page= 1;
            this.onLoad();
            this.$toast.success('刷新成功');
    },
     clickproduct(id, type) {
            this.$frontaxios.post(this.$front.recordStudy,{columnid:this.id});
            //跳转到观看内容页
            if (type == 'video') {
                this.$router.push({ name: 'videocontent', query: { id,columnid:this.id } });
            }
            if (type == 'audio') {
                this.$router.push({ name: 'audiocontent', query: { id,columnid:this.id } });
            }
            if (type == 'image_text') {
                this.$router.push({ name: 'image_textcontent', query: { id,columnid:this.id } });
            }
            if (type == 'exam'){
                this.$router.push({ name:'examcontent',query:{id,columnid:this.id}});
            }
        }
    },
    created(){
           this.id=this.$route.query.columnid;
        //    if(this.id=='dhcourse'||this.id=='order'){
        //      this.$toast.fail('请从专栏进入才能看目录');
        //      return;
        //    }
           this.onLoad();
    }
}
</script>